<template>
  <div>
    <div>
      <a-form class="ant-advanced-search-form" :form="form" @submit="handleSearch">
        <a-row :gutter="24">
          <a-col
            v-for="(item,index) in FromManageSearchInput"
            :key="index"
            :span="6"
            :style="{ display: index < count ? 'block' : 'none' }"
          >
            <a-form-item>
              <a-input
                v-decorator="[
                `${item.value}`
              ]"
                :placeholder="item.title"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="24" :style="{ textAlign: 'left' }">
            <a-button type="primary" html-type="submit">
              <a-icon type="search" />查询
            </a-button>
            <a-button type="primary" :style="{ marginLeft: '8px' }" @click="handleReset">重置</a-button>
            <a-button-group :style="{ marginLeft: '8px', fontSize: '12px' }">
              <a-button type="primary" icon="plus" @click="() => setFromAddVisible(true)">新增</a-button>
              <a-button icon="delete">批量删除</a-button>
            </a-button-group>
            <a-button
              type="primary"
              :style="{ marginLeft: '8px', fontSize: '12px' }"
              :disabled="!hasSelected"
              :loading="loading"
              @click="start"
            >多选取消</a-button>
            <a
              :style="{ marginLeft: '8px', fontSize: '12px' }"
              @click="toggle"
              v-if="FromManageSearchInput.length > 8"
            >
              展开
              <a-icon :type="expand ? 'up' : 'down'" />
            </a>
          </a-col>
        </a-row>
      </a-form>
      <a-modal
        width="60%"
        v-model="FromAddVisible"
        title="流程表单"
        centered
        @ok="() => (FromAddVisible = false)"
      >
        <FromManageAdd />
      </a-modal>
    </div>
    <a-table
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :columns="columns"
      :data-source="data"
    >
      <a slot="name" slot-scope="text">{{ text }}</a>
      <span slot="tags" slot-scope="tags">
        <a-tag
          v-for="tag in tags"
          :key="tag"
          :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
        >{{ tag.toUpperCase() }}</a-tag>
      </span>
      <span slot="action">
        <a>编辑</a>
        <a-divider type="vertical" />
        <a>表单修改</a>
        <a-divider type="vertical" />
        <a>删除</a>
        <a-divider type="vertical" />
      </span>
    </a-table>
    <span style="margin-left: 8px">
      <template v-if="hasSelected">{{ `选择 ${selectedRowKeys.length} 条` }}</template>
    </span>
  </div>
</template>
<script>
import FromManageAdd from "./FromManageAdd.vue";
const columns = [
  {
    title: "表单key",
    dataIndex: "name",
    scopedSlots: { customRender: "name" }
  },
  {
    title: "表单名称",
    dataIndex: "tabname"
  },
  {
    title: "Tags",
    key: "tags",
    dataIndex: "tags",
    scopedSlots: { customRender: "tags" }
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" }
  }
];

const FromManageSearchInput = [
  {
    title: "表单KEY",
    value: "tabkey"
  },
  {
    title: "表单名称",
    value: "tabname"
  }
];

const data = [];
for (let i = 0; i < 46; i++) {
  data.push({
    key: i,
    name: `Edward King ${i}`,
    tabname: `London, Park Lane no. ${i}`,
    tags: ["nice", "developer"]
  });
}

export default {
  components: { FromManageAdd },
  data() {
    return {
      data,
      columns,
      FromManageSearchInput,
      selectedRowKeys: [], // Check here to configure the default column
      loading: false,
      tabkey_search: "",
      tabname_search: "",
      expand: false,
      form: this.$form.createForm(this, { name: "advanced_search" }),
      FromAddVisible: false
    };
  },
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0;
    },
    count() {
      return this.expand ? 11 : 8;
    }
  },
  methods: {
    start() {
      this.loading = true;
      // ajax request after empty completing
      setTimeout(() => {
        this.loading = false;
        this.selectedRowKeys = [];
      }, 1000);
    },
    onSelectChange(selectedRowKeys) {
      console.log("selectedRowKeys changed: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    fromManageSearch() {
      console.log(this.tabkey_search, this.tabname_search);
    },
    handleSearch(e) {
      e.preventDefault();
      this.form.validateFields((error, values) => {
        console.log("error", error);
        console.log("Received values of form: ", values);
      });
    },
    setFromAddVisible(FromAddVisible) {
      this.FromAddVisible = FromAddVisible;
    },
    handleReset() {
      this.form.resetFields();
    },

    toggle() {
      this.expand = !this.expand;
    }
  }
};
</script>


<style lang="scss" scoped>
.components-input-demo-size .ant-input {
  width: 200px;
  margin: 0 8px 8px 0;
}
.ant-advanced-search-form {
  padding: 14px;
  background: #fbfbfb;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  margin-bottom: 10px;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

#components-form-demo-advanced-search .ant-form {
  max-width: none;
}
#components-form-demo-advanced-search .search-result-list {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 100px;
  text-align: center;
  padding-top: 80px;
}
</style>